<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>

    <div>
        <img class="a" src="../img/a1.jpg" alt="">
    </div>

    <script>

        // 轮播：每隔1s换一张图片
        //     分析： 一开始显示a1.jpg   a2.jpg   a3.jpg   a4.jpg
        //      思路：设置一个变量  i   i++      字符串拼接


        // 此方法  图片的命名有要求    不建议使用



        // 找到图片这个标签    获取标签
        var oImg = document.querySelector('.a');


        var i = 1;
        setInterval(function () {
            // 每隔1s要做的事情
            // console.log(111);
            i++;
            if (i === 5) {
                i = 1;
            }
            // 设置src    .src    .style
            oImg.src = '../img/a' + i + '.jpg';
            oImg.alt = '666';
        }, 1000)

    </script>

</body>

</html>